<template>
    <div class="app-container">
       <div style="margin-bottom: 10px;">
        <div>快递费余额：<span style="font-weight: bold;color: #f00">{{expressFee}}</span></div>
       </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
        <el-form-item label="订单编号" prop="orderSerial">
          <el-input v-model="queryParams.orderSerial" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="快递单号" prop="emsNum">
          <el-input v-model="queryParams.emsNum" placeholder="请输入快递单号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <!-- 费用类型 0-增加 1-扣减 -->
        <el-form-item label="收支类型" prop="feeType">
          <el-select v-model="queryParams.feeType" placeholder="请选择收支类型" clearable>
            <el-option v-for="dict in feeTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="收支时间">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- @selection-change="handleSelectionChange" -->
      <el-table v-loading="loading" :data="detailList" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="storeCode" label="店铺编号" align="left">
        </el-table-column>
        <el-table-column prop="storeName" label="店铺名称" align="left">
        </el-table-column>
        <el-table-column prop="orderSerial" label="订单编号" align="left">
        </el-table-column>
        <el-table-column prop="emsNum" label="快递编号" align="left">
        </el-table-column>
        <!-- 0-增加 1-扣减 -->
        <el-table-column prop="feeType" label="收支类型" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.feeType=='0'">增加</div>
            <div v-else-if="scope.row.feeType=='1'">扣减</div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column prop="expressFee" label="金额" align="left">
        </el-table-column>
        <el-table-column prop="createTime" label="收支时间" align="left">
        </el-table-column>
        <el-table-column label="凭证" align="left" prop="list" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.list.length>0" style="display: flex;">
              <div style="width: 100px;height: 100px;">
                <el-image style="width: 100px; height: 100px" :src="scope.row.list[0]" :preview-src-list="scope.row.list"
                  fit="contain"></el-image>
              </div>
            </div>
          </template>
        </el-table-column>
  
        <!-- <el-table-column prop="createTime" label="凭证" align="left">
        </el-table-column> -->
        <el-table-column prop="remark" label="备注" align="left">
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </template>
  
  <script>
    import {
      expressFeeDetails,
      getOwnStoreInfo
    } from "@/api/store/storemanage";
  
    import store from "@/store";
    import {
      geteditList,
    } from "@/api/store/orderhead";
    export default {
      name: "feesDetails",
      dicts: ['product_flag', 'ems_status'],
      data() {
        return {
          groundVisible: false, //上架
          offShelfVisible: false, //下架
          nestedTableData: [],
          dateRange: [],
          feeTypeList: [{
              value: '0',
              label: '增加'
            },
            {
              value: '1',
              label: '扣减'
            }
          ],
          tableData: [],
          editForm: {},
          dialogVisible: false,
          dialogTitle: '',
          tabPosition: 'left',
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 总条数
          total: 0,
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            orderSerial: '',
            emsNum: '',
            feeType: '',
            startDate: '',
            endDate: '',
          },
          // 表单参数
          form: {},
          xlsFile: [],
          fileListN: [],
          allList: [],
          propsObj: {
            label: 'text',
            value: 'value',
            option: 'children',
          },
          detailsShop: {},
          detailList: [],
          emsList: [],
          ruleForm: {
            emsCode: '',
            emsNum: '',
            startTime: '',
            endTime: ''
          },
          rules: {
            emsCode: [{
              required: true,
              message: '请选择快递公司',
              trigger: 'change'
            }, ],
          },
          emsFromArrs: [],
          addressXz: [],
          endPickerOptions: {
            disabledDate: time => {
              if (this.ruleForm.startTime) {
                return time.getTime() < new Date(this.ruleForm.startTime).getTime();
              }
            }
          },
          privinceList: store.getters.privinceList,
          cityList: store.getters.cityList,
          countyList: store.getters.countyList,
          totalFreightPre: null,
          expressFeeBalance: null,
          expressFee:null,
        };
      },
      async created() {
        this.getOwnStoreInfo()
        this.getList()
      },
      methods: {
        getOwnStoreInfo() {
          getOwnStoreInfo().then(response => {
            if (response.code == '200') {
                if(response.data){
                    this.expressFee = response.data.expressFee
                }
            }
          });
        },
        getList() {
          let params = {
            pageSize: this.queryParams.pageSize,
            pageNum: this.queryParams.pageNum,
            orderSerial: this.queryParams.orderSerial,
            emsNum: this.queryParams.emsNum,
            feeType: this.queryParams.feeType,
            startDate: this.dateRange[0],
            endDate: this.dateRange[1],
          }
          expressFeeDetails(params).then(response => {
            console.log(response, )
            if (response.code == '200') {
              this.detailList = response.rows;
              this.detailList.map(v => {
                if (v.certificateUrl) {
                  v.list = v.certificateUrl.split(',')
                } else {
                  v.list = []
                }
              })
              this.total = response.total;
              this.loading = false;
            }
          });
        },
        // 表单重置
        reset() {
          this.form = {
            storeName: '',
            productCode: '',
            productFlag: '',
            productName: '',
          };
          this.resetForm("form");
          this.xlsFile = [];
          this.fileListN = [];
          this.tableData = []
  
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.getList();
          this.dateRange = []
        },
        rechargeBtn() {
          this.dialogVisible = true
        },
      }
    };
  </script>
  <style scoped>
    .mesSty {
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
    }
  
    .cell-ellipsis {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
    }
  
    .rechargeBtn {
      color: #fff;
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 4px;
      background-color: #1890ff;
      margin-left: 10px;
      margin-right: 10px;
      cursor: pointer;
    }
  </style>
  